<template>
  <view>
    <button @click="buttonClick">{{ title }}</button>
    <view ref="txt">测试 ref dom 结构</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '点我',
    }
  },

  // 生命周期 ---------------------------------- start
  /**
   * @description: 监听 页面初始化
   * @param {object} param 上个页面传递的数据（用于页面传参）
   * !注意：
   * （1）触发时机早于 onLoad；
   * （2）仅百度小程序基础库 3.260 以上支持 onInit 生命周期；
   * #平台差异性
   * 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑；
   * 不依赖 “页面传参”的逻辑可以直接使用 created 生命周期替代；
   * #最低版本: 3.1.0 +
   */
  onInit(param) { },

  /**
   * @description: 监听 页面加载
   * #钩子调用时：响应式数据、计算属性、方法、侦听器、props、slots 已设置完成
   * @param {object} param 上个页面传递的数据（用于页面传参来的参数）
   * @return {*}
   */
  onLoad(param) {
    console.log('监听-页面加载-onLoad:', this.title);
  },

  /**
   * @description: 监听 页面初次渲染完成
   * !此时组件已挂载完成，DOM 树($el)已可用
   * !注意如果渲染速度快，会在页面进入动画完成前触发
   * @return {*}
   */
  onReady() {
    console.log('监听-页面初次渲染完成-onReady:');
    console.log('访问 data 内数据', this.title);
    console.log('访问 dom', this.$refs.txt);
  },
  // 生命周期 ---------------------------------- end

  /**
   * @description: 监听 页面显示
   * !页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
   * @return {*}
   */
  onShow() {
    console.log('监听-页面显示-onShow');
  },

  /**
   * @description: 监听 页面隐藏
   * @return {*}
   */
  onHide() { },

  /**
   * @description: onShow & onHide
   * !注意：页面显示，是一个会重复触发的事件。
   * 理解：
   * a 页面刚进入时，会触发 a 页面的 onShow。
   * 当 a 跳转到 b 页面时，a 会触发 onHide，而 b 会触发 onShow。
   * 但当 b 被关闭时，b 会触发 onUnload，此时 a 再次显示出现，会再次触发 onShow。
   * !特殊：tabbar 切换，会触发各自的 onShow & onHide
   * 在 tabbar 页面（指 pages.json 里配置的 tabbar），不同 tab 页面互相切换时，会触发各自的 onShow 和 onHide
   */


  /**
   * @description: 监听 页面卸载
   * @return {*}
   */
  onUnload() { },

  /**
   * @description: 监听 窗口尺寸变化
   * @return {*}
   */
  onResize() { },

  /**
   * @description: 监听 用户下拉动作，一般用于下拉刷新
   * @return {*}
   */
  onPullDownRefresh() { },

  /**
   * @description: 监听 页面滚动到底部的事件
   * !注意1：scroll-view使用时
   * 若使用scroll-view导致页面没有滚动，则触底事件不会被触发；
   * scroll- view滚动到底部的事件请参考 scroll - view的文档。
   * !注意2：触发此事件的底部距离 需要在 pages.json 里定义
   * @return {*}
   */
  onReachBottom() { },

  /**
   * @description: 点击 tab 时触发
   * @parma {jsonstring} e 事件参数
   * !e的返回格式为 json 对象
   * {number} index 被点击 tabItem的序号，从 0开始
   * {string} pagePath 被点击 tabItem的页面路径
   * {string} text 被点击 tabItem的按钮文字
   * #使用场景：常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
   * !特殊需求：若想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用 plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。
   * !特殊2：支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作
   */
  onTabItemTap(e) {
    console.log(e);
    // e的返回格式为 json 对象：{ "index": 0, "text": "首页", "pagePath": "pages/index/index" }
  },

  /**
   * @description: 监听 用户点击右上角分享
   * @return {*}
   */
  onShareAppMessage() { },

  /**
   * @description: 监听 用户点击右上角转发到朋友圈
   * #平台差异：仅微信小程序
   * #最低版本: 2.8.1 +
   * @return {*}
   */
  onShareTimeline() { },

  /**
   * @description: 监听用户点击右上角收藏
   * #平台差异：仅微信小程序、QQ小程序
   * #最低版本: 2.8.1 +
   * @return {*}
   */
  onAddToFavorites() { },

  /**
   * @description: 监听 页面滚动
   * @parma {object} e 事件对象
   * {number} scrollTop 页面在垂直方向已滚动的距离
   * !nvue不支持
   * !注意1：onPageScroll里不要写交互复杂的js，比如频繁修改页面。
   * 因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。
   * 如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。（uvue在app端无此限制）
   * 在webview渲染时，比如app-vue、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。
   * 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，参考。(uni-app x不支持)
   * 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。（uni-app x可自由在uts中设置固定位置）
   * @return {*}
   */
  onPageScroll(e) {
    console.log('滚动距离为：' + e.scrollTop)
  },

  /**
   * @description: 监听 页面返回
   * @parma {object} options 返回来源
   * {string} from 触发返回行为的来源；
   * 值1：'backbutton' 表示来源是左上角返回按钮或 android 返回键；
   * 值2：'navigateBack' 表示来源是 uni.navigateBack；
   * !注意1：nvue不支持；支付宝小程序不支持返回此字段
   * !注意2：onBackPress上不可使用async，会导致无法阻止默认返回
   * !注意3：支付宝小程序只有真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为
   * @return {*}
   */
  onBackPress(options) {
    console.log('from:' + options.from)
  },

  /**
   * @description: 监听原生标题栏按钮点击事件
   * @param {jsonobject} e json对象
   * {number} index 原生标题栏按钮数组的下标
   * @return {*}
   */
  onNavigationBarButtonTap(e) {
    console.log(e) // e的返回格式为json对象：{"text":"测试","index":0}
  },

  /**
   * @description: 监听 原生标题栏搜索输入框输入内容变化事件
   * @return {*}
   */
  onNavigationBarSearchInputChanged() { },

  /**
   * @description: 监听 原生标题栏搜索输入框搜索事件
   * !用户点击 软键盘上的“搜索”按钮 时触发。
   * @return {*}
   */
  onNavigationBarSearchInputConfirmed() { },

  /**
   * @description: 监听 原生标题栏搜索输入框点击事件
   * !（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
   * @return {*}
   */
  onNavigationBarSearchInputClicked() { },

  // 生命周期 ---------------------------------- end

  methods: {
    buttonClick: function () {
      this.title = '被点了'
    },
  },
}
</script>